import $ from 'jquery';
import Module from './Module';

let slice = Array.prototype.slice;

export default class Popover extends Module {
  constructor(opts) {
    super(opts);
  }

  _init() {
    this.button = this.opts.button;
    this.editor = this.opts.button.editor;
    this.el = $('<div class="simditor-popover"></div>').appendTo(this.editor.el).data('popover', this);
    this.render();
    this.el.on('mouseenter', e => this.el.addClass('hover'));
    return this.el.on('mouseleave', e => this.el.removeClass('hover'));
  }

  render() { }

  _initLabelWidth() {
    let $fields;
    $fields = this.el.find('.settings-field');
    if (!($fields.length > 0)) return;

    this._labelWidth = 0;
    $fields.each((i, field) => {
      let $field;
      let $label;
      $field = $(field);
      $label = $field.find('label');
      if (!($label.length > 0)) {
        return;
      }
      return this._labelWidth = Math.max(this._labelWidth, $label.width());
    });
    return $fields.find('label').width(this._labelWidth);
  }

  show($target, position) {
    if (position == null) {
      position = 'bottom';
    }
    if ($target == null) {
      return;
    }
    this.el.siblings('.simditor-popover').each((i, popover) => {
      popover = $(popover).data('popover');
      if (popover.active) {
        return popover.hide();
      }
    });
    if (this.active && this.target) {
      this.target.removeClass('selected');
    }
    this.target = $target.addClass('selected');
    if (this.active) {
      this.refresh(position);
      return this.trigger('popovershow');
    } else {
      this.active = true;
      this.el.css({
        left: -9999
      }).show();
      if (!this._labelWidth) {
        this._initLabelWidth();
      }
      this.editor.util.reflow();
      this.refresh(position);
      return this.trigger('popovershow');
    }
  }

  hide() {
    if (!this.active) {
      return;
    }
    if (this.target) {
      this.target.removeClass('selected');
    }
    this.target = null;
    this.active = false;
    this.el.hide();
    return this.trigger('popoverhide');
  }

  refresh(position) {
    let editorOffset;
    let left;
    let maxLeft;
    let targetH;
    let targetOffset;
    let top;
    if (position == null) {
      position = 'bottom';
    }
    if (!this.active) {
      return;
    }
    editorOffset = this.editor.el.offset();
    targetOffset = this.target.offset();
    targetH = this.target.outerHeight();
    if (position === 'bottom') {
      top = targetOffset.top - editorOffset.top + targetH;
    } else if (position === 'top') {
      top = targetOffset.top - editorOffset.top - this.el.height();
    }
    maxLeft = this.editor.wrapper.width() - this.el.outerWidth() - 10;
    left = Math.min(targetOffset.left - editorOffset.left, maxLeft);
    return this.el.css({
      top: top + this.offset.top,
      left: left + this.offset.left
    });
  }

  destroy() {
    this.target = null;
    this.active = false;
    this.editor.off('.linkpopover');
    return this.el.remove();
  }

  _t() {
    let args;
    let ref;
    let result;
    args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
    result = super._t.apply(this, args);
    if (!result) {
      result = (ref = this.button)._t.apply(ref, args);
    }
    return result;
  }
}


Popover.prototype.offset = {
  top: 4,
  left: 0
};
Popover.prototype.target = null;
Popover.prototype.active = false;